<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
    <link rel="stylesheet" href="../../../assets/global/plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../../../assets/global/plugins/bootstrap-table/bootstrap-table.css">
    <link rel="stylesheet" href="../../css/style.css">

</head>
<body>
<div class="container-fluid">
    <div class="row"></div>
    <ol class="breadcrumb">
        <li>主页</li>
        <li>资产管理</li>
        <li>员工管理</li>
    </ol>

    <div class="row">
        <form class="form-horizontal">
            <div class="form-group">
                <div class="col-md-4">
                    <label class="col-md-4">姓名</label>
                    <div class="col-md-8">
                        <input class="form-control" id="nameForSearch"/>
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="col-md-4">部门</label>
                    <div class="col-md-8">
                        <select class="form-control" id="deptForSearch"></select>
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="col-md-4">职务</label>
                    <div class="col-md-8">
                        <select class="form-control"></select>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4">
                    <label class="col-md-4">年龄</label>
                    <div class="col-md-8">
                        <div class="input-group">
                            <input  id="begin" class="form-control" type="number"/>
                            <span class="input-group-addon">--</span>
                            <input id="end" class="form-control" type="number"/>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="col-md-4">性别</label>
                    <div class="col-md-8">
                        <label class="radio-inline">
                            <input type="radio" name="genderForJquery" value="male"/> 男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="genderForJquery" value="female"/> 女
                        </label>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="col-md-offset-4">
                        <button type="button" class="btn btn-success btn-query" id="btnSearch">搜索</button>
                    </div>
                </div>
            </div>

        </form>
    </div>
    <div class="row">
        <ul class="nav nav-tabs" id="toggleView">
            <li class="active" id="showTable">
                <a href="#list">
                    表格显示
                </a>
            </li>
            <li id="showCards">
                <a href="#cards">
                    卡片显示
                </a>
            </li>
        </ul>
        <div id="lists">
            <table id="list" class="table table-bordered table-striped table-hover table-condensed">
            </table>
        </div>
        <div id="cards">
        </div>
    </div>
</div>
</div>
<div class="btn-group" id="toolbar">
    <button class="btn btn-success" id="btnAdd">添加</button>
    <button class="btn btn-warning" id="btnEdit">修改</button>
    <button class="btn btn-danger" id="btnRemove">删除</button>
    <button class="btn btn-info" id="btnExport">导出</button>
</div>

<!--
    模态窗体的作用
    1. 添加
    2. 修改
-->
<div class="modal fade" id="info">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="infoTitle"></h2>
            </div>

            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <input type="hidden" id="empId"/>
                        <label class="col-md-4 control-label">
                            姓名
                        </label>
                        <div class="col-md-8">
                            <input class="form-control" id="empName"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-4 control-label">
                            年龄
                        </label>
                        <div class="col-md-8">
                            <input type="number" class="form-control" id="age"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-4 control-label">
                            性别
                        </label>
                        <div class="col-md-8">
                            <label class="radio-inline">
                                <input type="radio" id="male" name="gender" value="male"/> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" id="female" name="gender" value="female"/> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-4 control-label">
                            部门
                        </label>
                        <div class="col-md-8">
                            <select class="form-control" id="dept"></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-4 control-label">
                            职务
                        </label>
                        <div class="col-md-8">
                            <select class="form-control" id="title"></select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <div class="pull-right" id="saveMsg">添加成功</div>
                <div class="btn-group">
                    <button class="btn btn-success" id="btnSave">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../../assets/global/plugins/moment/moment.js"></script>

<script src="../../../assets/global/plugins/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.10.21/tableExport.min.js"></script>
<script src="../../../assets/global/plugins/mockjs/mock.js"></script>
<script src="../../mock/basic.js"></script>
<script src="../../../assets/global/plugins/bootstrap/js/bootstrap.js"></script>
<script src="../../../assets/global/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="../../../assets/global/plugins/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>

<script src="../../js/basic/employee.js"></script>

</html>